<template>
  <div class="my">
    <div class="usermsg">
      <div class="left">
        <img :src="userInfo.avatar" alt="" />
      </div>
      <div class="right">
        <h3>{{ userInfo.nickname }}</h3>
        <p>ID:{{ userInfo.uid }}</p>
      </div>
      <div class="option">
        <router-link to="/my/myOption">
          <i class="iconfont icon-sitting"></i>
          </router-link>
      </div>
    </div>
    <div class="money">
      <ul>
        <li>
          <router-link to="/">
            <p>我的余额</p>
            <h3>{{ userInfo.now_money }}</h3>
          </router-link>
        </li>
        <li>
          <router-link to="/">
            <p>当前佣金</p>
            <h3>0.00</h3>
          </router-link>
        </li>
        <li>
          <router-link to="/">
            <p>优惠券</p>
            <h3>0</h3>
          </router-link>
        </li>
      </ul>
    </div>
    <div class="order">
      <div class="title">
        <h3>我的订单</h3>
        <span>全部订单 ></span>
      </div>
      <ul>
        <li v-for="item in order" :key="item.id">
          <router-link :to="item.url">
            <i :class="item.icon"></i>
            <p>{{ item.txt }}</p>
          </router-link>
        </li>
      </ul>
    </div>
    <div class="server">
      <div class="title"><h3>我的服务</h3></div>
      <ul>
        <li v-for="item in server" :key="item.id">
          <router-link :to="item.url">
            <i :class="item.icon"></i>
            <p>{{ item.txt }}</p>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import compHeader from "../components/compHeader.vue";
export default {
  name: "pageHome",
  data() {
    return {
      order: [
        { id: 1, icon: "iconfont icon-shopping", txt: "待付款", url: "/" },
        { id: 2, icon: "iconfont icon-roundcheck", txt: "待发货", url: "/" },
        { id: 3, icon: "iconfont icon-deliver", txt: "待收货", url: "/" },
        { id: 4, icon: "iconfont icon-message", txt: "待评价", url: "/" },
        { id: 5, icon: "iconfont icon-yue", txt: "售后/退款", url: "/" },
      ],
      server: [
        {
          id: 6,
          icon: "iconfont icon-huiyuanzhongxin",
          txt: "会员中心",
          url: "/",
        },
        { id: 7, icon: "iconfont icon-kanjia", txt: "砍价记录", url: "/" },
        {
          id: 8,
          icon: "iconfont icon-huodongtuiguang",
          txt: "我的推广",
          url: "/",
        },
        { id: 9, icon: "iconfont icon-yue", txt: "我的余额", url: "/" },
        { id: 11, icon: "iconfont icon-dizhi", txt: "地址信息", url: "/" },
        {
          id: 12,
          icon: "iconfont icon-shoucang",
          txt: "我的收藏",
          url: "/collect",
        },
        { id: 13, icon: "iconfont icon-youhuiquan", txt: "优惠券", url: "/" },
        { id: 14, icon: "iconfont icon-service", txt: "联系客服", url: "/" },
      ],
      userInfo: null,
    };
  },
  components: {
    "comp-header": compHeader,
  },

  beforeRouteEnter: (to, from, next) => {
    let token = JSON.parse(localStorage.getItem("token"));
    if (token) {
      next();
    } else {
      next("/login");
    }
  },
  created() {
    let userInfo = JSON.parse(localStorage.getItem("userInfo")).data.data;
    this.userInfo = userInfo;
    console.log(JSON.parse(JSON.stringify(userInfo)));
  },
};
</script>
<style lang="scss" scoped>
.my {
  width: 100%;
  position: relative;
  background-color: #f5f5f5;
  box-sizing: border-box;
  font-size: 14px;
  height: 100vh;
  .usermsg {
    width: 100%;
    z-index: 1;
    overflow: hidden;
    height: 140px;
    background-color: #9926f7;
    border-bottom-right-radius: 2em;
    border-bottom-left-radius: 2em;
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    .left {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      overflow: hidden;
      border: 1px solid #000;
      margin-left: 10px;
      margin-right: 20px;

      img {
        width: 100%;
        height: 100%;
      }
    }
    .right {
      h3 {
        font-size: 16px;
        font-weight: bold;
      }
      p {
        font-size: 12px;
        font-weight: bold;
      }
    }
  }
  .option {
    flex-grow: 1;
    text-align: right;
    margin-right: 20px;
    i{
      color: #fff;
    }
  }
  .money {
    ul {
      width: 95%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      margin-top: -30px;
      height: 80px;
      background-color: #fff;
      z-index: 2;
      border-radius: 5px;
      text-align: center;
      li {
        flex-basis: 33.3%;
        border-right: 1px solid #ccc;

        p {
          font-size: 12px;
          color: #aaa;
        }
        h3 {
          font-size: 20px;
          margin-top: 3px;
        }
        &:nth-child(3) {
          border: none;
        }
      }
    }
  }
  .order {
    height: 130px;
    width: 95%;
    margin: 10px auto;
    background-color: #fff;
    .title {
      height: 40px;
      line-height: 40px;
      padding: 0 10px;
      box-sizing: border-box;
      border-bottom: 1px solid #eee;
      h3 {
        width: 79%;
        display: inline-block;
      }
      span {
        display: inline-block;
        text-align: right;
      }
    }
    ul {
      height: 90px;
      display: flex;
      align-items: center;
      li {
        flex-grow: 1;
        text-align: center;
        a {
          display: block;
          i {
            font-size: 30px;
            color: #9926f7;
          }
          p {
            color: #000;
            margin-top: 5px;
          }
        }
      }
    }
  }
  .server {
    height: 200px;
    width: 95%;
    margin: 10px auto;
    background-color: #fff;
    .title {
      height: 40px;
      line-height: 40px;
      padding: 0 10px;
      box-sizing: border-box;
      border-bottom: 1px solid #eee;
      h3 {
        width: 100%;
        display: inline-block;
      }
    }
    ul {
      height: 160px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      li {
        flex-basis: 25%;
        text-align: center;
        margin-top: 10px;
        a {
          display: block;
          i {
            font-size: 30px;
            color: #9926f7;
          }
          p {
            color: #000;
            margin-top: 5px;
          }
        }
      }
    }
  }
}
</style>